<template>
    <div>
      <el-menu-item @click="() => handleMenuClick(item)" v-if="!item.Children || (item.Children && item.Children.length === 0)" :index="item.Path">
        {{ item.ProfessionName }}
      </el-menu-item>
  
      <el-sub-menu v-else :index="item.Path">
        <template #title>
          <el-icon><document /></el-icon>
          <span>{{ item.ProfessionName}}</span>
        </template>
        <div v-for="(child, index) in item.Children" :key="index">
          <DynamicMenu :item="child" />
        </div>
      </el-sub-menu>
    </div>
  </template>
  
  <script lang="ts">
  import { defineComponent } from 'vue';
  import { useRouter } from 'vue-router';
  
  export default defineComponent({
    name: 'DynamicMenu',
    props: {
      item: {
        type: Object,
        required: true
      }
    },
    setup() {
      const router = useRouter(); // 获取 router 实例
  
      const handleMenuClick = (item: any) => {
        console.log('Menu item clicked:', item);
        router.push({ name: item.Name }); // 根据 item 的 name 路由跳转
      };
      return {
        handleMenuClick
      };
    }
  });
  
  </script>